<!--房源信息需求详情页-->
<template>
	<view>
		<view class="bg"></view>
		<view class="ywjy">
			<view class="title">
				<view class="name">{{ serviceName }}</view>
				<!-- <view class="nav" @click="loadMap">
					 <u-icon name="car" color="#2979ff" size="40"></u-icon>
					 立即导航
				 </view> -->
			</view>
			<view class="fgx"></view>
			<view class="child textcontent">
				<view style="width: 50upx; display: inline-block"><u-icon name="map" color="#2979ff" size="40"></u-icon></view>
				{{ address }}
			</view>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx; display: inline-block"><u-icon name="home" color="#2979ff" size="40"></u-icon></view>
						{{ hdistrict }}
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx; display: inline-block"><u-icon name="grid" color="#2979ff" size="40"></u-icon></view>
						{{ huxing }}
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx; display: inline-block"><u-icon name="list" color="#2979ff" size="40"></u-icon></view>
						第 {{ floor }}层 , 共{{ floorSum }}层
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx; display: inline-block"><u-icon name="clock" color="#2979ff" size="40"></u-icon></view>
						{{ orderTime }}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">房屋图片</view></u-col>
			</u-row>
			<view class="fgx"></view>
			<view class="imgs">
				<u-image v-if="himages != ''" @click="imgListPreview" class="item" width="200rpx" height="200rpx" v-for="(item,index) in himages" :key="index" :index="index" :src="item"></u-image>
				<u-row v-else gutter="16" class="ele">
					<view class="textcontent" style="padding:10upx;">{{ state || '无' }}</view>
				</u-row>
			</view>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">房屋配置</view></u-col>
			</u-row>
			<view class="fgx"></view>
			<view class="tags">
				<u-tag class="tag" v-for="(item, index) in tags" :key="index" :index="index" :text="item" :show="true" bg-color="#FA8513" border-color="#FA8513" color="#FFF" />
			</view>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">其他需求</view></u-col>
			</u-row>
			<view class="fgx"></view>
			<u-form-item label="楼型" :label-width="150"><u-input disabled="" v-model="squareType" placeholder="无" /></u-form-item>
			<u-form-item label="价格" :label-width="150"><u-input disabled="" v-model="price" placeholder="无" /></u-form-item>
			<u-form-item label="价格类型" :label-width="150"><u-input disabled="" v-model="sellPriceType" placeholder="无" /></u-form-item>
			<u-form-item label="中介" :label-width="150"><u-input disabled="" v-model="needZhongjie" placeholder="无" /></u-form-item>
			<u-form-item label="有效期" :label-width="150"><u-input disabled="" v-model="yxq" placeholder="无" /></u-form-item>
			<u-form-item label="住宅性质" :label-width="150"><u-input disabled="" v-model="zzx" placeholder="无" /></u-form-item>
			<u-form-item label="适宜用途" :label-width="150"><u-input disabled="" v-model="syyt" placeholder="无" /></u-form-item>
			<u-form-item label="物业形态" :label-width="150"><u-input disabled="" v-model="wyxt" placeholder="无" /></u-form-item>
			<u-form-item label="装修状况" :label-width="150"><u-input disabled="" v-model="zxzk" placeholder="无" /></u-form-item>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">房源描述</view></u-col>
			</u-row>
			<view class="fgx"></view>
			<u-row gutter="16" class="ele">
				<view class="textcontent" style="padding:10upx;">{{ houseDesc || '无' }}</view>
			</u-row>
		</view>
		<view class="addSite">
			<view class="telphone" @click="go()">
				<u-icon name="phone" color="#2979ff" size="40"></u-icon>
				&nbsp;拨打电话
			</view>
		</view>
		<view style="height: 80px;"></view>
		<u-top-tips ref="uTips" style="top:0"></u-top-tips>
	</view>
</template>

<script>
export default {
	data() {
		return {
			yxq: '',
			zzx: '',
			syyt: '',
			wyxt: '',
			zxzk: '',
			needZhongjie: '',
			sellPriceType: '',
			price: '',
			squareType: '',
			tags: [],
			himages: [],
			floor: '',
			floorSum: '',
			huxing: '',
			serviceName: '',
			hdistrict: '',
			connectTel: '',
			status: '',
			orderTime: '',
			address: '',
			shi: '',
			ting: '',
			wei: '',
			houseDesc: ''
		};
	},
	methods: {
		imgListPreview() {
			uni.previewImage({
				indicator: 'number',
				loop: true,
				urls: this.himages
			});
		},
		loadMap() {
			window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:32.103516,118.825378;addr:江苏省南京市栖霞区网板路8号';
		},
		loadData(serviceId) {
			this.$u.get('/front/zhuangxiu/fyinfo/' + serviceId).then(res => {
				if (res.code == 200) {
					this.houseDesc = res.data.houseDesc;
					this.yxq = res.data.yxq;
					this.zzx = res.data.zzx;
					this.syyt = res.data.syyt;
					this.wyxt = res.data.wyxt;
					this.zxzk = res.data.zxzk;
					this.needZhongjie = res.data.needZhongjie;
					this.sellPriceType = res.data.sellPriceType || '';
					this.squareType = res.data.squareType;
					if (res.data.tags) {
						this.tags = res.data.tags.split(',');
					}
					if (res.data.himages) {
						this.himages = res.data.himages.split(',');
					}
					this.floor = res.data.hFloor;
					this.floorSum = res.data.hFloorSum;
					this.huxing = res.data.hShiNum + '室' + res.data.hTingNum + '厅' + res.data.hWeiNum + '卫';
					this.hdistrict = res.data.hdistrict;
					this.connectTel = res.data.connectPhone;
					this.orderTime = res.data.createTime;
					this.address = (res.data.province || '') + '-' + (res.data.city || '') + '-' + (res.data.district || '') + ' ' + (res.data.address || '');
					// 1：出售、2：求购、3：出租、4：求租
					if (res.data.htype == 1) {
						this.serviceName = '房屋出售';
						this.price = res.data.sellPrice + '万元';
					} else if (res.data.htype == 2) {
						this.price = res.data.sellPrice + '万元';
						this.serviceName = '房屋求购';
					} else if (res.data.htype == 3) {
						this.price = res.data.sellPrice + '元/月';
						this.serviceName = '房屋出租';
					} else if (res.data.htype == 4) {
						this.price = res.data.sellPrice + '元/月';
						this.serviceName = '房屋求租';
					}
				} else {
					this.$refs.uTips.show({
						title: res.msg,
						type: 'warning',
						duration: '2300'
					});
				}
			});
		},
		go() {
			uni.makePhoneCall({
				// 手机号
				phoneNumber: this.connectTel,
				// 成功回调
				success: res => {
					console.log('调用成功!');
				},
				// 失败回调
				fail: res => {
					console.log('调用失败!');
				}
			});
		}
	},
	onLoad(...options) {
		
		const id = this.$Router.$route.history.current.params.id;
		this.loadData(id);
	}
};
</script>

<style lang="scss" scoped>
.bg {
	position: fixed;
	top: 0;
	width: 100%;
	height: 900upx;
	background-image: linear-gradient(#fa8513, #fff);
}
.tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.tag {
		margin-left: 5rpx;
		margin-top: 5rpx;
	}
}
.title {
	display: flex;
	.name {
		flex-grow: 2;
	}
	.nav {
		width: 180upx;
	}
}
.imgs {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item {
		margin-left: 2upx;
	}
}
.ywjy {
	font-size: 1.1em;
	padding: 10upx;
	position: relative;
	margin: 0 auto;
	margin-top: 20upx;
	z-index: 1;
	width: 95%;
	height: 100%;
	border-radius: 5px;
	background-color: #ffff;
	.fgx {
		background-color: #eaeaea;
		width: 100%;
		height: 2upx;
		margin-top: 5upx;
		margin-bottom: 10upx;
	}
	.textcontent {
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}
	.ele {
		margin-top: 15upx;
	}
	.name {
		font-weight: bold;
		font-size: 1.5em;
	}
	.item {
		margin-top: 10upx;
		.child {
			height: 50upx;
			line-height: 50upx;
		}
	}
}
.addSite {
	border-top: 1px solid #ebebeb;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	line-height: 100rpx;
	font-size: 30rpx;
	display: flex;
	.telphone {
		flex-grow: 2;
		text-align: center;
		background-color: #ffff;
	}
	.telphone-gray {
		flex-grow: 2;
		text-align: center;
		background-color: #cfd0c6;
	}
	.add {
		background-color: #fa8513;
		color: #ffffff;
		width: 300upx;
		text-align: center;
	}
	.add-gray {
		background-color: #cfd0c6;
		color: #ffffff;
		width: 300upx;
		text-align: center;
	}
}
</style>
